<template>
  <div class="vido">
    <div class="header">
        <div class="header-center">猫眼电影</div>
    </div>
    <div class="nav">
      <div class="nav-left">
        <div class="left-one"><img src="../assets/maoyan.jpg" alt=""></div>
        <div class="left-two">猫眼</div>
        <div class="left-three">发现最新最热电影</div>
      </div>
      <div class="nav-right">打开APP>></div>
    </div>
    <ul class="video">
      <li class="list" v-for="(item,index) in lll.feeds" :key="index">
            <div class="newMovie">
          <video :src="item.video.url" controls></video>
        </div>
        <div class="di">
          <div class="tietle"> {{ item.title }}</div>
          <div class="foot">
            <div class="imge"><img :src="item.user.avatarurl"></div>
            <div class="name">{{ item.user.nickName }}</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
   data() {
    return {
      lll: {}
    }
  },

  created() {
    this.getlis()
  },
  methods: {
    getlis() {
      this.axios.get("/video/short/10").then((re) => {
        console.log("re===>", re)
        this.lll = re
        // console.log("re===>" , this.lll.data.feeds)
      })
    }
  }
}
</script>

<style scoped>
  .vido {
  width: 100%;
  height: 100%;
}

.header {
  width: 100%;
  height: 60px;
  background-color: brown;
  color: black;
  text-align: center;
}
.nav {
  width: 100%;
  height: 100%;
  display: flex;
}

.nav-left {
  width: 70%;
  display: flex;
  align-items: center;
}

.header-center {
  width: 100%;
  height: 60px;
  background-color: brown;
  color: aliceblue;
  font-size: 30px;
  text-align: center;
}

img {
  width: 100%;
  height: 100%;

}
.left-one {
  width: 10%;
  padding: 10px 5px 5px 15px;

}

.left-two {
  padding: 5px 10px 5px 0;
  display: flex;
  font-size: 25px;
  color: #de5f4d;
}

.left-three {
  color: #6a697e;
  font-size: 20px;
}

.nav-right {
  width: 30%;
  font-size: 18px;
  color: #b17f84;
  padding: 10px 0 0 9px;
}
video {
  width: 100%;
  height: 100%;
}


.video{
  display: flex;
  flex-wrap: wrap;
  
}

.list {
  width: 50vw;
  font-size: 10px;
  position: relative;
}



img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* .jile{
  color: red;
  font-size: 50px;
  text-align: center;
} */
.tietle {
  font-size: 12px;
  /* position: relative;
  height: 0;
  margin: 0;
  bottom: 9rem; */
  color: #ffeaed;
}

.foot {
  display: flex;

}

.foot .imge {
  width: 10%;
  padding: 0 20px 0 20px;

}

.foot .name {
  font-size: 10px;
  align-self: center;
  color: #eafff1;
}

.di {
  /* background-color: #b17f84; */
  position: absolute;
  bottom: 60px; 
}
</style>